<template>
	<view class="manualContainer">
		<image src="/static/icon/code.png" class="codeImg" />
		<input type="number" placeholder="手动输入商品条码" maxlength="20" class="manualInput"	/>
		<image src="/static/icon/icon-clear.png" class="clearImg" />
		<view class="btn" @tap="onTapBtn">
			<text class="btnText">关闭</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods: {
			onTapBtn() {
				this.$emit('btnTap')
			}
		}
	}
</script>

<style>
	.manualContainer {
		/* #ifdef H5 || MP-WEIXIN */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		background-color: #f8f8f8; 
		height: 110rpx;
		padding: 0 30rpx;
	}
	.codeImg {
		width: 45rpx; 
		height: 37rpx;
	}
	.manualInput {
		flex:1; 
		font-size: 30rpx; 
		padding-left: 20rpx; 
		padding-right: 20rpx;
	}
	.clearImg {
		width: 28rpx; 
		height: 28rpx; 
		margin-right: 20rpx;
	}
	.btn {
		/* #ifdef H5 || MP-WEIXIN */		display: flex;
		/* #endif */
		align-items: center; 
		justify-content: center;
		width: 130rpx; 
		height: 70rpx; 
		border-radius: 40rpx; 
		background-color: red;
	}
	.btnText {
		font-size: 28rpx;
		font-weight: bold;
		color: #fff;
		text-align: center;
	}
</style>
